<template>
    <ContentField>
        <div class="auth-wrapper">
            <div class="register-container">
                <!-- 动态标题 -->
                <h1 class="register-title">
                    <span class="welcome-text">加入我们</span>
                    <span class="brand">BALLBALL</span>
                </h1>

                <form @submit.prevent="register" class="register-form">
                    <!-- 用户名输入 -->
                    <div class="input-group">
                        <svg class="input-icon" viewBox="0 0 24 24">
                            <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
                            />
                        </svg>
                        <input
                            v-model="username"
                            type="text"
                            class="form-input"
                            placeholder="用户名"
                            required
                        />
                    </div>

                    <!-- 密码输入 -->
                    <div class="input-group">
                        <svg class="input-icon" viewBox="0 0 24 24">
                            <path
                                d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
                            />
                        </svg>
                        <input
                            v-model="password"
                            type="password"
                            class="form-input"
                            placeholder="密码"
                            required
                        />
                    </div>

                    <!-- 确认密码 -->
                    <div class="input-group">
                        <svg class="input-icon" viewBox="0 0 24 24">
                            <path
                                d="M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17z"
                            />
                        </svg>
                        <input
                            v-model="confirmPassword"
                            type="password"
                            class="form-input"
                            placeholder="确认密码"
                            required
                        />
                    </div>

                    <!-- 动态错误提示 -->
                    <transition name="slide-fade">
                        <div v-if="error_message" class="error-message">⚠️ {{ error_message }}</div>
                    </transition>

                    <!-- 提交按钮 -->
                    <button type="submit" class="submit-btn">
                        <span class="btn-text">立即注册</span>
                        <svg class="arrow-icon" viewBox="0 0 24 24">
                            <path
                                d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"
                            />
                        </svg>
                    </button>
                </form>
            </div>
        </div>
    </ContentField>
</template>

<script>
import ContentField from '@/components/ContentField.vue'
import { ref } from 'vue'
import router from '@/router'
import axios from 'axios'

export default {
    components: {
        ContentField,
    },
    setup() {
        let username = ref('')
        let password = ref('')
        let confirmPassword = ref('')
        let error_message = ref('')

        const register = () => {
            axios
                .post('http://127.0.0.1:3000/user/account/register/', {
                    username: username.value,
                    password: password.value,
                    confirmPassword: confirmPassword.value,
                })
                .then((resp) => {
                    if (resp.data.code === 1) {
                        router.push({ name: 'main' })
                    } else {
                        error_message.value = resp.data.msg
                    }
                })
        }

        return {
            username,
            password,
            confirmPassword,
            error_message,
            register,
        }
    },
}
</script>

<style scoped>
/* 共用登录页样式 */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.register-container {
    background: white;
    padding: 2.5rem 3rem;
    border-radius: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 440px;
    transform: translateY(-10%);
}

.register-title {
    text-align: center;
    margin-bottom: 2.5rem;
}

.welcome-text {
    display: block;
    font-size: 1.8rem;
    color: #2c3e50;
    animation: textFloat 3s ease-in-out infinite;
}

.brand {
    display: block;
    font-size: 2.2rem;
    color: #409eff;
    font-weight: 700;
    text-shadow: 0 4px 6px rgba(64, 158, 255, 0.2);
}

/* 共用输入框样式 */
.input-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    fill: #606266;
    z-index: 2;
    transition: fill 0.3s ease;
}

.form-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.1);
    padding-left: 3.8rem;
}

.form-input:focus + .input-icon {
    fill: #409eff;
    transform: translateY(-50%) scale(1.1);
}

/* 共用按钮样式 */
.submit-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #409eff 0%, #2979ff 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(64, 158, 255, 0.3);
}

.arrow-icon {
    width: 20px;
    height: 20px;
    fill: white;
    transition: transform 0.3s ease;
}

.submit-btn:hover .arrow-icon {
    transform: translateX(3px);
}

/* 错误提示样式 */
.error-message {
    color: #ff4444;
    background: #fff0f0;
    padding: 1rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #ffcccc;
}

.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0;
}

@media (max-width: 480px) {
    .register-container {
        padding: 1.5rem;
        margin: 1rem;
    }

    .welcome-text {
        font-size: 1.5rem;
    }

    .brand {
        font-size: 1.8rem;
    }
}

@keyframes textFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}
</style>